{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
    My Calendar | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
    {{ block.super }}
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="{% static "bootstrap-calendar/css/calendar.css" %}">
    <link rel="stylesheet" href="{% static "bootstrap-calendar/css/custom.css" %}">
{% endblock stylesheets %}

{% block content %}
{% include "_student_sidebar.html" %}
<section id="main-content">
  <section class="wrapper">
      <div class="panel panel-default">
          <div class="panel-body">

              <div class="pull-right form-inline">
                  <div class="btn-group">
                      <button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
                      <button class="btn btn-default" data-calendar-nav="today">Today</button>
                      <button class="btn btn-primary" data-calendar-nav="next">Next >></button>
                  </div>
                  <div class="btn-group">
                      <button class="btn btn-warning" data-calendar-view="year">Year</button>
                      <button class="btn btn-warning" data-calendar-view="month">Month</button>
                      <button class="btn btn-warning" data-calendar-view="week">Week</button>
                      <button class="btn btn-warning" data-calendar-view="day">Day</button>
                  </div>
              </div>

              <h3></h3>
          </div>

          <div id="calendar"></div>

          <div class="well">
              <h4>Activities</h4>
              <ul id="eventlist" class="nav nav-list"></ul>
          </div>

      </div>
  </section>
</section>

{% endblock content %}

{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "bootstrap-calendar/js/underscore.js" %}"></script>
    <script type="text/javascript" src="{% static "bootstrap-calendar/js/calendar.js" %}"></script>
    <script type="text/javascript">
      $.py = {};
      $.py.get_modules_url = '{% url "course:get_student_modules" user.id %}'
    </script>
    <script type="text/javascript" src="{% static "bootstrap-calendar/js/student_custom.js" %}"></script>
{% endblock javascripts %}
